package com.example.myapplication.ui.screens


import android.graphics.pdf.PdfDocument
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Notifications
import androidx.compose.material.icons.filled.Place
import androidx.compose.material.icons.filled.Search
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.modifier.modifierLocalConsumer
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import coil.compose.AsyncImage
import com.example.myapplication.ViewModel.ArticleViewModel
import com.example.myapplication.ViewModel.MainViewModel
import com.example.myapplication.ViewModel.VideoViewModel
import com.example.myapplication.ui.components.*
import com.example.myapplication.ui.components.TopAppBar
import com.google.accompanist.pager.HorizontalPager


@OptIn(ExperimentalMaterialApi::class, com.google.accompanist.pager.ExperimentalPagerApi::class)
@Composable
// 使用Lifecycle时需要导包
// viewModel会自动找到MainViewModel,然后自动创建对象,就可以不用自己new了
fun StudyScreen(
    vm: MainViewModel = viewModel(),
    articleViewModel: ArticleViewModel = viewModel(),
    videoViewModel: VideoViewModel = viewModel(),
    onNavigateToArticle: () -> Unit = {},
    onNavigateToVideo: () -> Unit = {}
) {
    Column() {
        // 标题栏
        TopAppBar(modifier = Modifier.padding(horizontal = 8.dp)) {
            // 搜索按钮
            // 通过surface来设置形状
            // weight(1f) 使搜索框填充剩余空间
            Surface(
                modifier = Modifier
                    .clip(RoundedCornerShape(16.dp))
                    .weight(1f),
                color = Color(0x33ffffff)
            ) {
                Row(
                    modifier = Modifier.padding(horizontal = 8.dp, vertical = 8.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Icon(
                        imageVector = Icons.Default.Search,
                        contentDescription = null,
                        tint = Color.White,
                        modifier = Modifier.size(15.dp)
                    )
                    // maxLines 1行显示
                    // TextOverflow.Ellipsis 溢出省略
                    Text(
                        text = "搜索感兴趣的资讯或课程",
                        color = Color.White,
                        fontSize = 12.sp,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                }
            }
            // 设置空白区域大小
            Spacer(modifier = Modifier.width(8.dp))
            // 学习进度文本
            // 文本占2行,使用\n换行
            Text(text = "学习\n进度", fontSize = 10.sp, color = Color.White)
            Spacer(modifier = Modifier.width(8.dp))
            // 进度
            Text(text = "33%", fontSize = 10.sp, color = Color.White)
            Spacer(modifier = Modifier.width(8.dp))
            // icon
            Icon(
                imageVector = Icons.Default.Notifications,
                contentDescription = null,
                tint = Color.White
            )
        }

        // tab
        // contentColor 可以设置tab栏底部横线的颜色
        // indicator 可以自定义tab`选中样式
        TabRow(
            selectedTabIndex = vm.categoryIndex,
            backgroundColor = Color(0x66149EE7),
            contentColor = Color(0xFF149EE7)
        ) {
            vm.categories.forEachIndexed { index, category ->
                Tab(
                    selected = index == vm.categoryIndex,
                    onClick = {
                        vm.updateCategoryIndex(index)
                    },
                    selectedContentColor = Color(0xff149ee7),
                    unselectedContentColor = Color(0xFF666666)
                ) {
                    Text(
                        text = category.title,
                        modifier = Modifier.padding(vertical = 9.dp),
                        fontSize = 14.sp
                    )
                }
            }
        }

        // indicator = {} 去除tab默认选中样式
        // divider = {} 去除tab底部横线样式
        TabRow(
            selectedTabIndex = vm.typeIndex,
            backgroundColor = Color.Transparent,
            contentColor = Color(0xFF149EE7),
            indicator = {},
            divider = {}
        ) {
            vm.types.forEachIndexed { index, item ->
                // LeadingIconTab带图标的icon
                LeadingIconTab(
                    selected = vm.typeIndex == index, onClick = {
                        vm.updateTypeIndex(index)
                    },
                    selectedContentColor = Color(0xff149ee7),
                    unselectedContentColor = Color(0xFF666666),
                    icon = {
                        Icon(imageVector = item.icon, contentDescription = null)
                    },
                    text = {
                        Text(
                            text = "${item.title}",
                            modifier = Modifier.padding(vertical = 9.dp),
                            fontSize = 16.sp
                        )
                    }
                )
            }
        }
        LazyColumn() {
            // 在LazyColumn中需要使用item
            // 轮播图
            item { SwiperContent(vm) }

            // 通知
            item { NotificationContent(vm) }


            if (vm.showArticle) {
                // 新闻列表
                items(articleViewModel.list) { article ->
                    ArticleItem(article, modifier = Modifier.clickable { onNavigateToArticle?.invoke() })
                }
            } else {
                // 视频课程
                items(videoViewModel.list) { item ->
                    VideoItem(modifier = Modifier.clickable {
                       onNavigateToVideo()
                    },item)
                }
            }
        }
    }
}

@Preview
@Composable
fun StudyScreenPreview() {
    StudyScreen()
}

